<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="nav_title">基础信息</span>
      </div>
      <div class="base_info">
        <div class="row">
          <div>姓名：{{ detail.riskPapersList.name }}</div>
          <div>性别：{{ detail.riskPapersList.sex }}</div>
          <div>年龄：{{ detail.riskPapersList.age }}岁</div>
        </div>
        <div class="row">
          <div>体检编号：{{ detail.riskPapersList.checkNo }}</div>
          <div>手机号：{{ detail.riskPapersList.mobile }}</div>
          <div>创建时间：{{ detail.riskPapersList.createTime }}</div>
        </div>

      </div>

    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="nav_title">评估疾病</span>
      </div>
      <!-- 查询结果 -->
      <el-table
        v-loading="listLoading"
        :data="illnessList"
        element-loading-text="正在查询中..."
        border
        fit
        highlight-current-row
      >


        <el-table-column align="center" width="200" label="疾病名称" prop="illnessName"/>

        <el-table-column align="center" label="模型输入参数">
          <template slot-scope="scope">
            <json-viewer
              :value="scope.row.inputParams"
              :expanded="false"
              :expand-depth="1"
              copyable
              boxed
              sort
              theme="my-awesome-theme"
              style="text-align: left;"
            ></json-viewer>

          </template>
        </el-table-column>


        <el-table-column align="center" label="评估结果">
          <template slot-scope="scope">

            <json-viewer
              :value="scope.row.resultJson"
              :expanded="false"
              :expand-depth="1"
              copyable
              boxed
              sort
              theme="my-awesome-theme"
              style="text-align: left;"
            ></json-viewer>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="nav_title">问卷问题</span>
      </div>
      <!-- 查询结果 -->
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="正在查询中..."
        border
        fit
        highlight-current-row
      >
        <!--
        <el-table-column
          width="140"
          align="center"
          label="ID"
          prop="id"
          sortable
        />-->
        <el-table-column
          prop="sortIndex"
          label="序号"
          align="center"
          width="100"
        ></el-table-column>

        <el-table-column align="center" width="200" label="问题名称" prop="topicName"/>
        <el-table-column align="center" label="问题选项作答">
          <template slot-scope="scope">

            <json-viewer
              :value="scope.row.options"
              :expanded="false"
              :expand-depth="0"
              copyable
              boxed
              sort
              theme="my-awesome-theme"
              style="text-align: left;"
            ></json-viewer>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="nav_title">指标数据</span>
      </div>
      <!-- 查询结果 -->
      <el-table
        v-loading="listLoading"
        :data="indexList"
        element-loading-text="正在查询中..."
        border
        fit
        highlight-current-row
      >

        <el-table-column align="center" width="300" label="指标名称" prop="indexName"/>

        <el-table-column align="center" label="指标值" prop="indexValue"/>
      </el-table>
    </el-card>


    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="nav_title">源采集数据</span>
      </div>
      <div class="content-detail">

        <json-viewer
          :value="detail.riskPapersList.indexParams"
          :expanded="false"
          :expand-depth="1"
          copyable
          boxed
          sort
          theme="my-awesome-theme"
          style="text-align: left;"
        ></json-viewer>
      </div>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="nav_title">总结入参</span>
      </div>
      <div class="content-detail">

        <json-viewer
          :value="detail.riskPapersList.inputParams"
          :expanded="false"
          :expand-depth="1"
          copyable
          boxed
          sort
          theme="my-awesome-theme"
          style="text-align: left;"
        ></json-viewer>
      </div>
    </el-card>


    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="nav_title">总结结论</span>
      </div>
      <div class="content-detail">
        {{detail.riskPapersList.resultContent}}

      </div>
    </el-card>

    <el-dialog title="详细内容" :visible.sync="dialogVisible" width="70%">
      <pre class="content-detail">{{ dialogContent }}</pre>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<style scoped>
  .base_info {
    font-weight: bold;
    color: #666;
  }

  .nav_title {
    font-weight: bold;
    color: #666;
  }

  .base_info .row {
    display: flex;
    margin-bottom: 20px;
  }

  .base_info .row div {
    flex: 1;
  }

  .box-card {
    margin-bottom: 30px;
  }

  .content-detail {
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 60vh;
    overflow-y: auto;
    line-height: 1.5;
    font-family: monospace;
  }

  .el-card__header {
    background-color: #F5F5F5 !important;
  }
</style>
<script>
  import { papersList, papersDetail } from '@/api/questionnaire'
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

  import JsonViewer from 'vue-json-viewer'

  export default {
    name: 'Admin',
    components: { Pagination, JsonViewer },
    data() {
      return {
        dialogVisible: false,
        dialogContent: '',
        detail: {
          riskPapersList: {
            checkNo: '',
            mobile: '',
            createTime: '',
            name: '',
            sex: '',
            age: ''
          },
          optionsList: [],
          indexList: [],
          illnessList: []
        },
        list: [],
        indexList: [],
        illnessList: [],
        total: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 10,
          title: undefined,
          status: undefined,
          sort: '+id'
        }
      }
    },

    created() {
      // this.getList();
      const userId = this.$route.query.userId
      console.log('用户信息:', userId, JsonViewer)
      papersDetail(userId)
        .then((response) => {
          this.detail = response.data.data

          this.list = response.data.data.optionsList
          this.indexList = response.data.data.indexList
          this.illnessList = response.data.data.illnessList
          console.log('用户信息:', this.list)
          // this.total = response.data.data.total;
          this.listLoading = false
        })
        .catch(() => {
          // this.list = [];
          // this.total = 0;
          // this.listLoading = false;
        })
    },
    methods: {
      showDetailDialog(content) {
        this.dialogContent = content || '无内容'
        this.dialogVisible = true
      }
    },
    filters: {
      truncate(value, length) {
        if (!value) return '无内容'
        return value.length > length ? value.substring(0, length) + '...' : value
      }
    }
  }
</script>
